import React from "react";

import { storiesOf } from "@storybook/react";
import { text, select, number } from "@storybook/addon-knobs";
// import { withSmartKnobs } from 'storybook-addon-smart-knobs'


import Progress from ".";

const variants = {
  line: "line",
};

const statusVariants = {
  success: "success",
  error: "error",
  normal: "normal",
  active: "active",
};

storiesOf("Progress", module)
  .add("Progress", () => (
    <div className='flex items-baseline'>
      <Progress
        // className="w-16"
        persent={number('Persent', 50)}
        type={select("Type", variants, "line")}
        status={select("Status", statusVariants, "normal")}
        strokeWidth={number("StrokeWidth", undefined)}
        strokeColor={text("StrokeColor", undefined)}
        borderRadius={number("BorderRadius", undefined)}
      />
    </div>
  ));
